Skip to content
lab components / Navigation

Horizontal navigation

Allow users to quickly access essential site-wide utilities and global actions via a persistent, top-level navigation element that also reinforces brand identity

ExamplesPropertiesGuidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { HorizontalNavigation } from "@siteimprove/fancylab";

#Examples

This layout is the standard for Siteimprove products and integrations.

Composition:

  • Logo: Reinforces brand identity and provides a link back to the homepage.
  • Actions: Provide quick access to essential system-level actions (e.g. Sign out, Notifications, Profile, Settings, Account switching) through the usage of Buttons and ActionMenus.
  • Skip to content: ( ): The "Skip to content" link allows keyboard users to navigate directly to the main content using the "Tab" key.

Learn more about the actions prop in the Actions example below.

Theme: agentic-ai-2025
return ( <HorizontalNavigation appLogo={{ icon: props.theme === "agentic-ai-2025" ? siteImproveLogoAgenticAi2025 : siteImproveLogo, href: "https://my2.siteimprove.com", title: "Go to main page", "aria-label": "Siteimprove", "data-observe-key": "top-nav-company-link", }} actions={actionsDummyData} data-observe-key="top-nav" skipToContentId="properties" /> );

#Title

The title prop will add a title in the h1 element right after the logo.

Learn more about the actions prop in the Actions example below.

Theme: agentic-ai-2025
<HorizontalNavigation appLogo={{ icon: props.theme === "agentic-ai-2025" ? siteImproveLogoAgenticAi2025 : siteImproveLogo, href: "https://my2.siteimprove.com", title: "Go to main page", "aria-label": "Siteimprove", "data-observe-key": "top-nav-company-link", }} title="Page Report" actions={actionsDummyData} data-observe-key="top-nav" skipToContentId="properties" />

#Actions

The actions prop will render either ActionMenus or Buttons depending on what values you pass to it. To render an ActionMenu you pass ActionMenuProps. To render a Button you can pass the following props from the ButtonProps type: children, onClick, href and openNew plus optionally the following props from the TooltipProps type to render a tooltip for the button: content and placement.

Theme: agentic-ai-2025
<HorizontalNavigation appLogo={{ icon: props.theme === "agentic-ai-2025" ? siteImproveLogoAgenticAi2025 : siteImproveLogo, href: "https://my2.siteimprove.com", title: "Go to main page", "aria-label": "Siteimprove", "data-observe-key": "top-nav-company-link", }} actions={[ { items: [ { text: "Users", onClick: () => console.log("clicked"), "data-observe-key": "top-nav-users", }, ActionMenu.divider, { text: "Sites", href: "https://siteimprove.com", "data-observe-key": "top-nav-sites" }, { text: "Groups", href: "https://siteimprove.com", "data-observe-key": "top-nav-groups" }, ActionMenu.divider, { text: "Report", href: "https://siteimprove.com", "data-observe-key": "top-nav-report" }, ActionMenu.divider, { text: "Subscriptions", href: "https://siteimprove.com", "data-observe-key": "top-nav-subscriptions", }, ActionMenu.divider, { text: "All settings", href: "https://siteimprove.com", "data-observe-key": "top-nav-all-settings", }, ], buttonContent: ( <Icon> <IconSettings /> </Icon> ), "data-observe-key": "top-nav-settings", "aria-label": "Settings", tooltip: "Settings", }, { href: "https://siteimprove.com", children: ( <Icon> <IconHelpOutline /> </Icon> ), tooltip: "Help and training", "data-observe-key": "top-nav-help", "aria-label": "Help and training", }, { onClick: () => console.log("clicked"), children: ( <Icon> <IconMyProfile /> </Icon> ), "data-observe-key": "top-nav-profile", "aria-label": "Profile", }, ]} data-observe-key="top-nav" skipToContentId="properties" />

#Properties

#Guidelines

#Best practices

#Principle

  • Recognition over recall: The HorizontalNavigation should present familiar options, making it easy for users to find what they need without having to remember specific locations.
  • Affordances: Icons and labels should clearly communicate their function (e.g. a gear icon for settings).
  • Consistency: The HorizontalNavigation should maintain a consistent appearance and behavior across all pages and sections.

#General

  • Use the HorizontalNavigation for essential, high-level actions that users will need frequently throughout their experience.
  • Prioritize actions that are global in scope (e.g., sign-in, account settings).

#Placement

HorizontalNavigation is typically used in the top of the page, e.g Sitimprove’s platform, CMS plugins, Browser extensions.

#Style

  • Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your HorizontalNavigation to existing components for visual consistency.
  • Consider using a "sticky" or fixed position so the bar remains visible as users scroll.
  • Use clear, recognizable Icons. Pair with a concise Tooltip if space allows.
  • Use Icon-only buttons for global system-level utilities to reduce visual clutter.

#Do not use when

  • Actions specific to a page or feature.
  • The navigation structure is complex and requires multiple levels of sub-menus. Use Side Navigation instead.

#Accessibility

#For designers

  • Ensure sufficient color contrast between icons, text, and the background.
  • People with visual impairments may not see the icon at all, so the button's label or aria-label must accurately convey its purpose.

#For developers

This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

Link labels:

  • Keep labels short and actionable (e.g., "Sign out", or "Notifications").
  • Use sentence case consistently.
  • Avoid abbreviations and technical jargon.